let mainCanvas = document.getElementById('mainCanvas');
mainCanvas.width = 500;
mainCanvas.height = 500;
let c = mainCanvas.getContext('2d');
let cameraX = 0;
let cameraY = 0;
let rainbow = false;

let map = [
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
	[1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
	[1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
	[1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
	[1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
	[1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
	[1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
	[1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0], 
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
mapPixelWidth = 1000;
mapPixelHeight = 1000;

let gridBoxWidth = mapPixelWidth/map[1].length;
let gridBoxHeight = mapPixelHeight/map.length;

function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

function drawMap(context, map, cameraX, cameraY) {
	for(let y = 0; y < map.length; y++) {
		for(let x = 0; x < map[y].length; x++) {
			if(map[y][x] == 1) {
				if(rainbow) {
					let r = getRandomInt(50, 255);
					let g = getRandomInt(50, 255);
					let b = getRandomInt(50, 255);
					context.fillStyle = 'rgba(' + r + ', ' + g + ', ' + b + ', 1)'
				}
				context.fillRect((x * gridBoxWidth) + cameraX, (y * gridBoxHeight) + cameraY, gridBoxWidth, gridBoxHeight);
			}
		}
	}
}

function drawFrame(context, map, cameraX, cameraY) {
	context.clearRect(0, 0, context.canvas.width, context.canvas.height);
	drawMap(context, map, cameraX, cameraY);
}

document.onkeypress = function(e) {
	console.log(e);
	switch(e.key) {
		case 'w':
			cameraY += 10;
			break;
		case 'a':
			cameraX += 10;
			break;
		case 's':
			cameraY -= 10;
			break;
		case 'd':
			cameraX -= 10;
			break;
		default:
			break;
	}
}

let drawInterval = setInterval(function(){
	drawFrame(c, map, cameraX, cameraY);
}, 120/1000);

